Material swatch

Sometimes you may want to show your materials separately from the rest of the model.

Result

Loading...

Live Editor

function Component() {
  const viewer = useRef(null);
  useLayoutEffect(() => {
    if (viewer.current) {
      viewer.current.features = {
        UPHOLSTERY: "CORD_EMERALD", // or "SMART_LEATHER_SADDLE", "SOFT_WOOL_OATMEAL"
        LEGS: "TAPERED_METAL_LEG_BRASS", // or "TAPERED_METAL_LEG_BLACK"
      };
    }
  }, [viewer]);

  return (
    <cylindo-viewer ref={viewer} customer-id="5098" code="SECTIONAL PDP">
      <cylindo-swatch
        feature-code="UPHOLSTERY"
        zoomable
        display-mode="fit-inside-viewer"
        thumbnail-crop="0.1,0.1, 0.2, 0.2"
      />
      <cylindo-swatch feature-code="LEGS" />
      <cylindo-swatch feature-code="LEGS" thumbnail-crop="0, 0, 1" />
      <cylindo-thumbnail-bar></cylindo-thumbnail-bar>
    </cylindo-viewer>
  );
}

Props

Name	Type	Default	Description
alt	string	""	Alternative text for the material item. This is used by screen readers.
customer-id	string	null	The customer ID of the material to show. It falls back to the customer ID from the <cylindo-viewer>.
display-mode	string	"cover-viewer"	Determines how the material image fits within the viewer's content area.
feature-code	string	null	The feature code of the material to show.
thumbnail-crop	string	"0.03125, 0.03125, 0.0625"	The crop applied to the swatch thumbnail.